import * as PIXI from 'pixi.js'
import { useWindowSize } from '@vueuse/core'
import { setPixi } from '@renderer/store/modules/usePixiStore'
import { modalClick } from '@renderer/utils/events'
import useMainStore from '@renderer/store/modules/useMainStore'
import btnDownload from './btnDownload'
import btnEdit from './btnEdit'
import btnDel from './btnDel'
const { width, height } = useWindowSize()

export default async (): Promise<PIXI.Container<PIXI.ContainerChild>> => {
  const mainStore = useMainStore()
  const modalRect = new PIXI.Graphics()
  const { scale } = mainStore.getAppAttr
  modalRect.rect(0, 0, width.value / scale, height.value / scale).fill({
    color: 0x000000,
    alpha: 0.7,
  })
  const container = new PIXI.Container({ visible: false })
  container.addChild(modalRect)
  setPixi('modal', container)
  modalClick.whiteAdd(container)

  // 添加导出按钮
  const btnDownloadSprite = await btnDownload()
  container.addChild(btnDownloadSprite)
  // 添加编辑按钮
  const btnEditSprite = await btnEdit()
  container.addChild(btnEditSprite)
  // 添加删除按钮
  const btnDelSprite = await btnDel()
  container.addChild(btnDelSprite)
  return container
}
